<template>
  <mt-tabbar fixed id="footer" v-model="selected">
    <mt-tab-item id="tools">
      <img slot="icon" src="../image/1.png">
      工具箱
    </mt-tab-item>
    <mt-tab-item id="course">
      <img slot="icon" src="../image/2.png">
      课程表
    </mt-tab-item>
    <mt-tab-item id="setting">
      <img slot="icon" src="../image/3.png">
      设置
    </mt-tab-item>
  </mt-tabbar>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  data (){
    return {
      selected: 'course',
      urlMap: {
        'tools':'/main/tools',
        'course':'/main/course',
        'setting':'/main/setting'
      }
    }
  },
  computed:{
    ...mapGetters([
      'getNavIndex'
    ])
  },
  mounted(){
    this.selected = this.getNavIndex;
  },
  watch:{
    selected(value, oldValue){
      if(value !== oldValue){
        this.$router.replace(this.urlMap[value]);
        this.$store.commit('setNavIndex', value);
      }
    }
  }
}
</script>
<style scoped>
#footer{
  width: 100%;
  height: 50px;
}
</style>
